之前在「vue.js 3.x 學習手冊 (19) 組件的綜合練習」文章中有提到，如果需要跨文件取用元件的話，需先了解webpack和vue-cli的使用，而前幾篇文章我們也已經開始使用vue-cli和預設被安裝進去的webpack，那接下來就讓我們看看如何設計一個單文件的元件吧！

我們這次的案例，還是會選用「vue.js 3.x 學習手冊 (19) 組件的綜合練習」文章裡面的那個下拉式選單，在這篇文章中已經提到這個下拉式選單已經符合以下這四個條件：

1. 一個Fancy的下拉式選單（不是只用select, option標籤就可以立刻完成的）
2. 他是一個vue component（只不過在那篇文章中，這個component並沒有辦法跨文件共用）
3. 這個下拉式選單的內容來自於外部（當時是用axio去載入外部json檔）
4. 下拉式選單元件的內容改變後，可以影響到非元件的內容（透過emit發送事件到父層）

那今天這篇文件的目標就是希望突破上述第二點的限制，我們希望可以把這個下拉式選單製作成一個可以被共用的元件，接下來就看看怎麼開始囉！（這篇文章會先忽略emit這一段的設計）

首先，我們載入外部json是透過axios來完成的，在vue-cli的介面中我們可以透過下面的指令來安裝axios：

npm install axios

這樣就準備好我們所需要的套件，準備開始進行單文件元件的開發囉！

首先建立一個「DropdownMenu.vue」檔案，放置在src的資料夾，檔案內容如下：

<template>
  <div class="section">
    <div class="select">
      <select :name="items">
        <option 
          v-for="item in items"
          v-bind:key="item.key"
          :value="item.value"
          :disabled="item.disabled"
          :selected="item.default"
        >
          {{ item.title }}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
import '@/assets/scss/dropdownMenu.scss';
export default {
    props: ['items'],
}
</script>

基本上跟前面元件設計的內容差不多，至不過css的部分我們換為載入「src/assets/scss/dropdownMenu.scss」這隻檔案，另外因為選單是接受外部的內容，所以script的部分還有需要讀取的props的名稱，如此就完成了DropdownMenu.vue這個文件的設計，接下來就準備讓他被主文件載入。

在主文件「App.vue」中，我們把這個元件給匯入

<template>
  <h1>{{ "Please select the item you like below" }}</h1>
  <DropdownMenu></DropdownMenu>
  <DropdownMenu></DropdownMenu>
</template>
<style lang="scss" scoped src="./assets/scss/main.scss"></style>
<script>
import DropdownMenu from "@/DropdownMenu.vue";
export default {
  components: {
    DropdownMenu,
  },
};
</script>

透過import匯入這個DropdownMenu.vue元件，然後在<template>中就可以使用元件，如此一些你就可以在預覽介面中看到如下的畫面：

接下來就是讓選單裡面的內容出現：

<template>
  <h1>{{ "Please select the item you like below" }}</h1>
  <DropdownMenu :items="state.selectData.system"></DropdownMenu>
  <DropdownMenu :items="state.selectData.provider"></DropdownMenu>
</template>
<style lang="scss" scoped src="./assets/scss/main.scss"></style>
<script>
import axios from "axios";
import DropdownMenu from "@/DropdownMenu.vue";
import { reactive, onBeforeMount } from "vue";
export default {
  setup() {
    const state = reactive({
      selectData: {
        system: null,
        provider: null,
      },
      selectedData: {
        system: null,
        provider: null,
      },
    });
    onBeforeMount(() => {
      axios.get("json/vueComponent.json").then((response) => {
        state.selectData = response.data;
      }).catch(function (response) {
        console.log(response);
      });
    })
    return { state };
  },
  components: {
    DropdownMenu,
  }
};
</script>

匯入的部分包含axios、Component以及在vue裡面會用到的互動式資料和生命週期，13～22行是用來儲存axios載入的資料以及被選擇的項目，24～28是和之前一模一樣的載入外部json指令，接下來就是在3、4這兩行上面加上items的屬性，如此一來就完成把資料塞進選單的任務。

這樣我們就完成了今天的任務，製作一個單文件元件，當然還缺了emit的部分，我想大家也絕對能夠自行幫忙補上，接下來幾篇文章我們會來看看在vue這個SPA（Single Page Application）系統中，要如何模擬出多個頁面製作的型式，敬請期待囉！